<template>
  <div class="home-head">
    <img class="top-head" :src='personInfo.avatar'>
    <div class="person-msg">
      <div class="person-msg-span">{{personInfo.nickname}}</div>
      <div class="person-msg-span">{{personInfo.phoneNumber}}</div>
    </div>
    <router-link to="/home">
      <div class="dev-msg">
        个人中心
      </div>
    </router-link>
  </div>
</template>

<script>
import {USERINFO} from '../../api/request'

export default {
  name: 'head',
  data () {
    return {
      personInfo: {
        avatar: '',
        nickname: '',
        phoneNumber: ''
      }
    }
  },
  created    () {
    USERINFO(this.$store.state.user.userId).then(
      res => {
        if (res.data.code === 200) {
          this.personInfo = res.data.data
          this.$store.dispatch('updateName', res.data.data.nickname)
        }
      },
      error => {
        console.log(error)
      })
  }
}
</script>

<style scoped>
  .home-head {
    position: relative;
    height: 1.9rem;
    background-color: #fff;
    color: #837d7d;
    padding-left: 0.3rem;
    padding-top: 0.31rem;
  }

  .top-head {
    line-height: 1.9rem;
    width: 1.28rem;
    height: 1.28rem;
    vertical-align: middle;
  }

  .person-msg {
    display: inline-block;
    vertical-align: middle;
  }
  .person-msg-span{
    font-size: 0.3rem;
    line-height: 0.5rem;
  }

  .dev-msg {
    position: absolute;
    left:5.5rem;
    top: 0.8rem;
    font-size: 0.36rem;
    color: #0092f8;
  }
</style>
